#main-content {
	background-image: url(../../images/grid-backg.png);
}

h1.titl {
	color: #7C574F;
	font-size: 30px;
	font-family: "Floral";
	text-transform: lowercase;
	font-weight: normal;
	text-align: center;
	margin-bottom: 50px;
}
/*img { max-width: 100%; }*/
#main-content .wrapper.page-view {
	width: 100%; position: relative;
	margin: 10px auto 0;
	background: rgba(255,255,255,0.8);
	padding: 50px 30px 50px 30px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-shadow: 0 2px 4px 1px #999;
}
#main-content .page-view p.groups {
	position: absolute; width: 100%;
	top: 15px; left: 0; 
	/*background: #34495E;*/
	background: #ddd;
	color: #D4D8DC;
	height: 35px; line-height: 35px;
	padding: 0 20px 0 100px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#main-content .page-view p.groups a {
	color: #3498DB;
}
@media (max-width: 768px) {
	#main-content .wrapper.page-view,
	#main-content .page-view p.groups {
		padding-left: 10px;
		padding-right: 10px;
	}
}
#main-content .page-view p.groups .bookmark {
	font-size: 18px;
	color: #333; margin-top: 7px;
	float: right; cursor: pointer;
}
#main-content .page-view p.groups .bookmark.glyphicon-star {
	color: #F1C40F;
}

#main-content .page-view .header, .lessoncontent {
	width: 100%; margin: auto;
	max-width: 700px;
}
.lessoncontent p.image, .lessoncontent p.multimedia {
	margin-bottom: 20px;
	text-align: center;
}
.lessoncontent h1,h2,h3, p {
	font-family: 'Roboto Slab', serif;
}
.lessoncontent h1 {
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
}
.lessoncontent h2 {
	font-size: 26px;
	font-weight: bold;
	margin-top: 25px;
}
.lessoncontent h3 {
	font-size: 20px;
}
.lessoncontent li {
	font-family: 'Roboto Slab', serif;
	margin: 5px 0; 
}
.lessoncontent p {
	margin: 10px 0;
	text-align: justify;
	color: #481301;
	text-indent: 25px;
	word-spacing: 4px;
	line-height: 22px;
}
.lessoncontent p strong {
	font-weight: bold;
	font-family: 'Roboto Slab', serif;
}
.lessoncontent p em {
	font-style: italic;
	font-family: 'Roboto Slab', serif;
}
.lessoncontent table {
	border: 1px solid #ccc;
}
.lessoncontent table td {
	padding: 5px;
	border: 1px solid #ccc;
	font-family: 'Roboto Slab', serif;
	font-size: 13px;
	word-spacing: 4px;
	line-height: 22px;
}
.lessoncontent table p {
	text-indent: 0;
	text-align: left;
}

.lessoncontent p.image {
	width: 100%; text-indent: 0;
}
.lessoncontent p img,
.timeline-view .content img {
	border: 1px solid #999;
	max-width: 600px;
}
.timeline-view .content p.image {
	text-align: center;
}
.lessoncontent p.multimedia {
	text-indent: 0;
}
.lessoncontent iframe,
.timeline-view .content iframe {
	width: 100%;
	max-width: 600px;
	height: 350px;
}
.timeline-view .content p.multimedia {
	text-align: center;
}
.element-label {
	margin: 0 auto;	width: 100%; 
	max-width: 600px; display: block;
	background: #ECF0F1;
	color: #34495E; text-align: left;
	word-spacing: 0; font-size: 11px;
	border-bottom: 1px solid #95A5A6;
	padding: 5px 10px; 
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.lesson-maps {
	border: 1px solid #ccc;
	margin: 0 auto;
	width: 100%; 
	max-width: 600px;
	height: 400px;
}
.change-view-btn {
	position: fixed;
	text-align: center;
	right: 0px; top: 65px;
	background: #2C3E50;
	cursor: pointer;
	color: #F1C40F; border-radius: 3px;
	z-index: 900; padding: 5px 8px;
	transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
}
.change-view-btn:hover {
	background: #000;
	color: #fff;
};

.wrapper {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.wrapper.ng-hide-add.ng-hide-add-active,
.wrapper.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.wrapper.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

/*=================================================================================================
=================================================================================================
=================================================================================================*/
.timeline-view .lesson-title * {
	color: #7C574F; margin: 0;
	padding: 10px; font-size: 35px;
	border-bottom: 2px solid #7C574F;
	text-transform: lowercase;
	font-weight: normal;
	font-family: "Floral";
}
.timeline-col {
	width: 230px; float: left;
	background: #333;
	color: #ccc; min-height: 300px;
	height: 100%; padding: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.timeline-col .titl {
	margin-bottom: 10px;
	border-bottom: 1px solid #999;
	padding-bottom: 6px;
	font-weight: bold;
	color: #F1C40F;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: relative;
}
.timeline-col .titl span {
	display: block; top: 2px; left: 10px;
	color: #999; position: absolute;
}
.timeline-col ul {
	border-left: 1px solid #666;
	width: 100%;
	padding-left: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

}
.timeline-col li.selected {
	font-weight: bold;
	color: #fff;
}
.timeline-col li {
	margin: 10px 0;
	margin-left: 0;
	cursor: pointer;
	transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
}
.timeline-col li:hover {
	color: #fff;
	padding-left: 20px;
}
/*=======================================================*/

.maps-col {
	margin-left: 230px;
}

#timeline-map {
	height: 350px;
	/*width: 600px;*/
}
.maps-col .content {
	border-top: 2px solid #444;
	padding: 10px;
	color: #000;
	background: #EFE9B5;
}
.timeline-view .content p {
	text-align: justify;
}
.timeline-view .content {
	min-height: 200px;
}
.timeline-view .content .order {
	display: none;
}

/*=====================================================================================*/
/*=====================================================================================*/
/*=====================================================================================*/
.oo {
	transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
	margin-left: 0px;
}
.oo.ng-hide {
	margin-left: 2000px;
}

/*===========================================*/
.page-view .order {
	display: block; text-align: center;
	float: right; width: 40px;
	position: absolute;
	right: -30px; top: 0;
	color: #ccc;
}
.page-view p {
	position: relative;
	display: block;
}
/*====================================================================================*/
.comments-section {
	margin-top: 20px;
	padding-top: 20px;
	overflow: hidden;
}
.comments-section .wrapper {
	padding: 10px; background: rgba(255,255,255, 0.8);
}
.comments-section .user {
	font-weight: bold;
	color: blue;
}
.comments-section .head {
	border-bottom: 2px solid #481301;
	padding-bottom: 10px;
}
.comments-section .cm-list {
	padding: 20px;/* max-width: 500px;*/
}
.comments-section .cm-list li .time {
	font-size: 11px; font-style: italic;
	color: #999;
}
.comments-section .cm-child {
	/*margin-left: 20px;*/
	margin-bottom: 10px;
	margin-top: 20px;
	border-left: 1px solid #999;
	padding-left: 20px;
}
.comments-section .cm-list > li {
	border-bottom: 1px solid #999;
	margin-bottom: 20px;
	position: relative;
}
.comments-section li {
	display: block; margin-bottom: 20px;
}
.comments-section .cm-list .repl-btn {
	display: block;
	position: absolute;
	right: 3px;	bottom: 0px;
	color: #E74C3C;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}
.comments-section .avatar {
	display: block;
	float: left;
	width: 30px; height: 30px;
	background: #777;
	margin-right: 10px;
	margin-bottom: 10px;

	border-radius: 15px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 0px;
}
.comments-section .cm-list > li > .avatar {
	background: #C0392B;
}

#newTopic {
	/*max-width: 500px;*/
}
/*===========================================================================================*/
.question-section {}

#question-list { 
	width: 100%; height: 160px; padding: 0; 
	background: rgba(255,255,255,.7);
	padding: 5px 5px 10px;
}
#question-list .slidee { margin: 0; padding: 0; height: 100%; list-style: none;}
#question-list .slidee li { 
	float: left; margin: 0 10px 0 0; 
	padding: 0; width: 200px; 
	height: 100%; background: #ECF0F1;
	padding: 5px; color: #2C3E50;
	border-bottom: 2px solid #2980B9;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#question-list .slidee li:nth-child(4n+1) {
	border-bottom: 2px solid #E74C3C;
}#question-list .slidee li:nth-child(4n+2) {
	border-bottom: 2px solid #27AE60;
}#question-list .slidee li:nth-child(4n+3) {
	border-bottom: 2px solid #F1C40F;
}
.scrollbar { 
	width: 100%; height: 5px; 
	margin-bottom: 5px; background: #eee; 
	cursor: pointer; 
}
.scrollbar .handle {
    width: 100px; height: 3px;
    background: #888; border-radius: 2px;
}
#videos-list .slidee li .id {
	background: #000; color: #ccc;
	font-size: 11px; text-align: center;
	padding: 5px 0 0; margin-bottom: 0;
}
#videos-list .slidee li .info {
	padding: 3px; color: #ccc;
	background: #000; font-size: 11px;
	cursor: pointer;
}
#videos-list .slidee li .thumb {
	width: 100%; height: auto;
}
.controls {
	text-align: center;
	padding: 10px 0;
	position: relative;
}
.controls span.btn {
	margin: 0 10px;
}


#popup-question .answer ul {
	list-style: inside;
	margin-bottom: 10px;
	font-family: "Roboto Slab";
}
#popup-question .answer ul li {
	font-family: "Roboto Slab";
	list-style: inside;
}